import {Collapse, message} from "antd";
import React, {useEffect, useState} from "react";
import SyntaxHighlighter from 'react-syntax-highlighter';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import {atomOneDark} from 'react-syntax-highlighter/dist/esm/styles/hljs';

const {Panel} = Collapse;


export interface publicCssMethodItem {
    name: string,
    html: string,
    component: () => JSX.Element
}

const CopyableContainer = (props: { publicMethodList: publicCssMethodItem[] }) => {
    const onChange = (key: string | string[]) => {
        console.log(key);
    };
    return (<Collapse defaultActiveKey={['1']} onChange={onChange}>
            {props.publicMethodList?.map((item: publicCssMethodItem, index) => (
                <Panel header={item.name} key={index}>
                    {item.component ? item.component() : ''}
                    <br/>
                    <CopyToClipboard onCopy={() => {
                        message.success('复制成功');
                    }} text={item.html}>
                        <SyntaxHighlighter language="javascript" style={atomOneDark}>
                            {item.html}
                        </SyntaxHighlighter>
                    </CopyToClipboard>
                </Panel>
            ))}
        </Collapse>
    )
}
export default CopyableContainer
